<template>
  <div class="mapdisplay">
    <div class="display-left">
      <!-- <chart-map :mapJson="suqian" :zoom="0.9" right="5%" ></chart-map> -->
      <chart-map-up @listenToChildEvent='showMsgfromChild'></chart-map-up>
    </div>
      <div class="display-right">
        <div class="xian">{{this.regionIndex.title}}</div>
          <div class="son son1">
            <div class="num" style="color:#50E1A2">{{this.regionIndex.num1}}</div>
            <div class="content">{{this.maptitle[0]}}</div>
          </div>
           <div class="son son2">
            <div class="num" style="color:#50E1A2">{{this.regionIndex.num2}}</div>
            <div class="content">{{this.maptitle[1]}}</div>
          </div>
           <div class="son son3">
            <div class="num" style="color:#2FF3F1">{{this.regionIndex.num3}}</div>
            <div class="content">{{this.maptitle[2]}}</div>
          </div>
           <div class="son son4">
            <div class="num" style="color:#2FF3F1">{{this.regionIndex.num4}}</div>
            <div class="content">{{this.maptitle[3]}}</div>
          </div>
      </div>
    </div>
</template>

<script>
import ChartMapUp from '@/views/components/ChartMapUp.vue';
// import ChartMap from '../../components/ChartMap.vue';
// import MapRanklink from '../../components/MapRanklist.vue';
export default {
  components: {ChartMapUp ,  },
  data() {
    return {
      maptitle:[],
      mapinformationdata:[],
      regionIndex:{
        num1: 53,
        num2: 53,
        num3: 312,
        num4: 312,
        title: "宿城区"
      },
    };
  },
  computed: {
    suqian() {
      return require('../../common/suqian.json');
    },
  },
  created() {
    this.maptitle = this.$window.maptitle
  },
  mounted() {
  },
  methods: {
    showMsgfromChild(data){
      this.regionIndex = data
    }
  },
};
</script>

<style scoped lang='scss'>
.mapdisplay {
  width: 100%;
  height: 100%;
  // background-color: yellowgreen;
  .display-left {
    width: 100%;
    height: 100%;
    padding: 12rem;
    box-sizing: border-box;
    // background-color: orange;
  }
  .display-right {
    // z-index: 999;
    position: relative;
    top: -70%;
    right: -66%;
    width: 25%;
    min-width: 200rem;
    height: 35%;
    // background-color: orchid;
    background-image:url('../../../assets/img/选中展示.png') ;
    background-size: 100% 100%;
    .xian{
      width: 15%;
      // background-color: #fff;
      position: absolute;
      left: 13%;
      top: 10%;
      font-size: 8rem;
      color: #2FF3F1;
    }
      .son{
        display: inline-block;
        width: 37%;
        height: 28%;
        // background-color: pink;
        // margin-right: 2%;
        // margin-top: 2%;
        .num{
          width: 100%;
          height: 70%;
          text-align: center;
          font-size: 12rem;
          padding-top: 5%;
        }
        .content{
          width: 100%;
          height: 30%;
          text-align: center;
          font-size: 6rem;
          color: #fff;
        }
      }
      .son1{
        position: absolute;
        top: 28%;
        left: 10%;
      }
      .son2{
        position: absolute;
        top: 28%;
        right: 13%;
      }
       .son3{
        position: absolute;
        top: 61%;
        left: 10%;
      }
       .son4{
        position: absolute;
        top: 61%;
        right:13%;
      }
  }
}
</style>